<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 语义标签示例</title>
  <style>
    body { font-family: sans-serif; margin: 0; line-height: 1.6; }
    header { background: #333; color: #fff; padding: 1rem; }
    nav { background: #444; padding: 0.5rem; }
    nav a { color: #fff; margin-right: 1rem; text-decoration: none; }
    .container { display: flex; max-width: 1200px; margin: 0 auto; }
    main { flex: 3; padding: 1rem; }
    aside { flex: 1; background: #f4f4f4; padding: 1rem; }
    article { background: #fff; border: 1px solid #ddd; padding: 1rem; margin-bottom: 1rem; border-radius: 4px; }
    section { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #eee; }
    footer { background: #333; color: #fff; text-align: center; padding: 1rem; margin-top: 1rem; }
    figure { margin: 0; }
    figcaption { color: #666; font-size: 0.9rem; }
    time { color: #888; }
    address { font-style: normal; color: #666; }
    mark { background: #ffecb3; }
  </style>
</head>
<body>
  <!-- 页面头部 -->
  <header>
    <h1>网站标题</h1>
    <p>网站副标题：展示 HTML5 语义标签的应用</p>
  </header>
  
  <!-- 导航栏 -->
  <nav>
    <a href="#home">首页</a>
    <a href="#news">新闻</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系方式</a>
  </nav>
  
  <div class="container">
    <!-- 主要内容区域 -->
    <main>
      <!-- 文章 -->
      <article>
        <h2>HTML5 语义化标签介绍</h2>
        <p><time datetime="2025-08-29">2025年8月29日</time> 发布</p>
        
        <section>
          <h3>什么是语义化标签？</h3>
          <p>语义化标签是指能够清晰描述其内容含义的 HTML 标签。HTML5 引入了一系列新的语义化标签，使文档结构更加清晰，便于搜索引擎和辅助技术理解。</p>
        </section>
        
        <section>
          <h3>常用语义化标签</h3>
          <p>HTML5 提供了如 &lt;header&gt;、&lt;nav&gt;、&lt;main&gt;、&lt;article&gt;、&lt;section&gt;、&lt;aside&gt; 和 &lt;footer&gt; 等语义化标签。</p>
        </section>
        
        <figure>
          <img src="https://picsum.photos/800/400?random=1" alt="HTML5 语义化标签示意图" style="max-width:100%;">
          <figcaption>HTML5 语义化标签结构示意图</figcaption>
        </figure>
      </article>
      
      <!-- 另一个文章 -->
      <article>
        <h2>语义化的优势</h2>
        
        <section>
          <h3>对 SEO 友好</h3>
          <p>搜索引擎能够更好地理解页面结构，提高搜索排名。</p>
        </section>
        
        <section>
          <h3>提高可访问性</h3>
          <p>辅助技术（如屏幕阅读器）可以更好地解析页面内容，帮助残障人士访问网页。</p>
        </section>
        
        <section>
          <h3>代码可读性更高</h3>
          <p>开发者能够更快地理解和维护代码，提高开发效率。</p>
        </section>
      </article>
    </main>
    
    <!-- 侧边栏 -->
    <aside>
      <h3>相关链接</h3>
      <ul>
        <li><a href="#">HTML5 官方文档</a></li>
        <li><a href="#">MDN Web 文档</a></li>
        <li><a href="#">W3C 标准</a></li>
      </ul>
      
      <h3>热门文章</h3>
      <ul>
        <li><a href="#">CSS3 新特性详解</a></li>
        <li><a href="#">JavaScript ES6+ 特性介绍</a></li>
        <li><a href="#">响应式设计最佳实践</a></li>
      </ul>
      
      <h3>联系方式</h3>
      <address>
        <p>作者：<a href="mailto:author@example.com">Q</a></p>
        <p>地址：江西省九江市</p>
        <p>电话：<a href="tel:+13870262422">+13870262422</a></p>
      </address>
    </aside>
  </div>
  
  <!-- 页脚 -->
  <footer>
    <p>&copy; 2025 Q.</p>
    <p>使用 <mark>HTML5</mark> 语义化标签构建</p>
  </footer>
</body>
</html>